import useStore from '@/context/useStore';
import { Tree, Input, Button , Rate } from 'antd';
import { useEffect, useState } from 'react';
import {FormOutlined, PlusOutlined, MinusOutlined} from '@ant-design/icons';
import { observer } from 'mobx-react-lite';
import Editor from './mdEditor';
import styles from './skillDescriptionV2.less'


const { Search } = Input;

interface IProps {
    stationVersionId: string
}

const rates = ['', '了解', '熟悉', '掌握'];

const SkillDescriptionV2: React.FC<IProps> = props=>{

    // 设置初始的值
    
    // 当前选中的文档
    const { station } = useStore();
    const [ CurrentSkillId , setCurrentSkillId ] = useState('');
    const [isEdit, setIsEdit] = useState(false);


    // 获取起始值
    useEffect(() => {
        station.selectSkillList(props.stationVersionId)
    }, [])


    // 判断数据id是否存在 存在则调用其详情
    useEffect(() => {
        if(CurrentSkillId){
            console.log(CurrentSkillId);
            
            station.getStationSkillDetail(CurrentSkillId)
        }
    }, [CurrentSkillId])


    // 在树的最后追加一条数据
    function AddDescription(){
        console.log(props);
        
        station.inintSkill(props.stationVersionId);
    }


    // 添加一条
    function addChildDescription(parentID : string){
        station.inintSkill( props.stationVersionId , parentID )
    }

    // 从父树种删除一条
    function removeChildDescription(skillID : string){
        station.deleteSkill(skillID)
    }

    

    return <div>
        {/* 左边树形结构 */}
    {
        console.log(props.stationVersionId)
    }
        {/* 添加按钮 */}
        <Button type="primary" onClick={()=>{station.putSkill()}}>保存</Button>

        <main className={styles.main_button}>
            <section className={styles.main_left}>
                <section className={styles.main_find}>
                    <Search style={{ marginBottom: 8 }} placeholder="清输入内容" />
                    <Button onClick={()=>AddDescription()}>+</Button>
                </section>
                
                <Tree
                    autoExpandParent={true}
                    treeData={station.skillList}
                    titleRender={(nodeData: any) => {
                        return <p onClick={() => setCurrentSkillId(nodeData.id)}>
                            {isEdit && CurrentSkillId===nodeData.id  ? <input type="text" value={station.skillDetail.skillName} onKeyDown={e => {
                                // 弹个框
                                if (e.keyCode === 13) {
                                    station.putSkill();
                                    setIsEdit(false);
                                }
                            }} onChange={e => station.modifySKillDetail({skillName: e.target.value})} />
                                : <span>{CurrentSkillId===nodeData.id ?station.skillDetail.skillName: nodeData.label}</span>}
                            {CurrentSkillId === nodeData.id ? <span>
                                <FormOutlined onClick={() => setIsEdit(true)} />
                                <PlusOutlined onClick={() => addChildDescription(nodeData.id)} />
                                <MinusOutlined onClick={() => removeChildDescription(nodeData.id)} />
                            </span> : null}
                        </p>
                    }}
                />
            </section>
            {/* 右边平分项和md编辑器 */}
            {CurrentSkillId ? <section className={styles.main_right}>
                <Rate count={3} value={station.skillDetail.masterRequired} defaultValue={1} onChange={value=> station.modifySKillDetail({masterRequired : value})}></Rate>
                <span className="ant-rate-text">{rates[station.skillDetail.masterRequired]}</span>
                <span>一星到三星分别代表了解、掌握、精通3个级别</span>
                <Editor value={station.skillDetail.abilityStandard || ''} onChange={value =>station.modifySKillDetail({abilityStandard: value})}/> 
            </section> : null} 
        </main>
        
        
    </div>  
}

export default observer(SkillDescriptionV2);
